@import "../../../common/static/lib/css/root.less";

.index-widget-uservoice{
  height: 240px;
  position: relative;
  width: 1000px;
  margin:0 auto;
  .widget-container{
    height: 200px;
    position: relative;
    .widget-page{
      position: absolute;
      left:0;
      top:0;
      opacity: 0;
      width: 100%;
      height: 100%;
      transition:opacity 1s ease;
      background: #fff;
      .left-symbol{
        position: absolute;
        left:0;
        top:0;
        background: url(./image/symbol.png) no-repeat 0 0;
        display: block;
        width:19px;
        height: 18px;
      }
      .right-symbol{
        position: absolute;
        bottom:0;
        right:0;
        background: url(./image/symbol.png) no-repeat 0 -18px;
        display: block;
        width:19px;
        height: 18px;
      }
      .item{
        width: 450px;
        height: 100%;
        position: relative;
        i{
          width: 100px;
          height: 100px;
          display: block;
          position: absolute;
          left:0;
          top:0;
          .border-radius(50px);
          background-repeat: no-repeat;
          transition:all .5s ease;
          transform:translate(-100px, 0);
          background-image: url(./image/photo.png);
        }
        .icon0{
          background:url(./image/36k.png) no-repeat center center;
        }
        .icon1{
          background-position: center -490px;
        }
        .icon2{
          background-position: center -610px;
        }
        .icon3{
          background-position: center -10px;
        }
        .icon4{
          background-position: center -130px;
        }
        .icon5{
          background-position: center -250px;
        }
        .icon6{
          background-position: center -370px;
        }
        .voice-content{
          margin-left:120px;
          margin-bottom:20px;
          padding:5px 25px;
          color: #4f4f4f;
          line-height: 25px;
          position: relative;
        }
        .background{
          margin-left:120px;
          text-align: right;
          padding-right:30px;
          color: #181818;
          font-weight: 700;
        }
      }
      .item:hover{
        i{
          box-shadow: 0 0 15px #504fc5;
        }
      }
      .left{
        float: left;
      }
      .right{
        float: right;
      }
      a{
        color: #4f4f4f;
      }
      a:hover{
        color: #363636;
      }
    }
    .active{
      opacity: 1;
      .item{
        i{
          transform:translate(0, 0);
        }
      }
    }

  }
  .points{
    height: 30px;
    position: absolute;
    width:75px;
    left:50%;
    bottom:0;
    margin-left:-32px;
    z-index: 10;
    i{
      display: block;
      margin-right:10px;
      width: 14px;
      height: 14px;
      background: #bcbcbc;
      .border-radius(7px);
      cursor: pointer;
      float: left;
      transition:background 1s ease;
    }
    .active{
      background: #4545e6;
      .transform(scale(1.2));
    }
  }
}